import React from 'react';//核心语法 jsx
import ReactDom from 'react-dom'//转换 虚拟dom成真实dom
import Demo01 from './demo1.jsx';//虚拟dom
import Demo02 from "./demo2.jsx";

//创建虚拟dom
// 本质是一个对象
// {type:'div',props:{id:'app'},children:[{}]}
// <div id>
//  p
// </div>  真实dom

//React.createElement 用来创建虚拟dom
//为什么要有虚拟dom  虚拟dom就是react的核心
//内部优化 data diff 优化虚拟dom里面的数据
// dom diff 优化的是节点
// let vDom = React.createElement('div', {className: 'vDom'}, '哈哈哈哈');

// jsx语法
const VDom2 = <a href='http://www.baidu.com'>跳转到百度啊</a>;

//A:对象  B:标签
console.log(VDom2);
// console.log(document.getElementById('app'));


function App() {
  return <div>
    <Demo01/>
    <Demo02/>
  </div>
}

//把虚拟dom转换成真实dom
//参数:
// 1.虚拟dom
// 2.想要挂载到的节点
// 3.回调
ReactDom.render(<App/>, document.getElementById('app'), () => {
  console.log('挂载完成')
});
